<template>
  <div class="bankcard">
    <i class="el-icon-close bankcard-close" @click="cancel"></i>
    <h1 class="tc">账户信息</h1>
    <div class="bankcard-content">
      <span class="bank-title">我的账户信息</span>
      <div v-if="total == 0" class="no-bank">暂无数据</div>
      <div v-else>
        <div v-for="item in drawalList" :key="item.id" @click="editAccount(item.id)">
          <el-card class="box-card">
            <div class="showMr">
              <div class="bank-name">收款人：{{item.payee}}</div>
              <span v-if="item.default_payee == 1">默认账户</span>
              <el-button type="danger" size="mini" @click.stop="deleteItem(item)" class="deleteBut">删除</el-button>
            </div>
            <div class="bank-detail">
              收款渠道：
              <font class="font_success">{{item.type == 1?'支付宝':'银行卡'}}</font>
              ，收款账户：{{item.num}}
            </div>
          </el-card>
        </div>
      </div>
    </div>

    <div class="bankcard-btns tc">
      <el-button type="primary" class="submit" @click="addAccount">添加账户信息</el-button>
    </div>

    <addAccount ref="addAccount" @refresh="refresh" />
    <editAccount ref="editAccount" @refresh="refresh" :drawalList='drawalList' />
  </div>
</template>

<script>
import addAccount from "~/components/add-account";
import editAccount from "~/components/edit-account";
export default {
  components: {
    editAccount,
    addAccount,
  },
  data() {
    return {
      drawalList: [],
      form: {},
      total: 0,
    };
  },
  created() {
    this.getDrawal();

    if (this.$route.params && this.$route.params) {
      // this.$nextTick ( () => {
      //   this.$refs["addAccount"].show();
      // })
    }
  },
  beforeRouteEnter(to, from, next) {
    next((vm) => {
      //  这里的vm指的就是vue实例，可以用来当做this使用
      if (from.fullPath == "/mechanism/settlement/purse") {
        vm.$refs["addAccount"].show();
      }
    });
  },
  methods: {
    deleteItem(item) {
      this.$confirm("您确认要删除该收款人信息吗", "提示", {
        distinguishCancelAndClose: true,
        confirmButtonText: "删除",
        cancelButtonText: "取消",
      })
        .then(() => {
          this.$axios.delete(`api/withdrawal/${item.id}`).then((res) => {
            if (res.data.code == 200) {
              this.editCollection = false;
              this.getDrawal()
              this.$alert("收款账户删除成功！", "提示", {
                confirmButtonText: "确定",
                center: true,
                type: "warning",
                callback: (action) => {},
              });
            } else {
              this.$alert(res.data.message, "提示", {
                confirmButtonText: "确定",
                center: true,
                type: "warning",
                callback: (action) => {},
              });
            }
          });
        })
        .catch((action) => {
          // this.$message({
          //   type: "info",
          //   message:
          //     action === "cancel" ? "放弃保存并离开页面" : "停留在当前页面",
          // });
          if (action === "action") {
          }
        });
    },
    addAccount() {
      this.$refs["addAccount"].show();
    },
    refresh() {
      this.getDrawal();
    },
    editAccount(value) {
      let ordersIndex = this.drawalList.findIndex((item) => item.id == value);
      this.form = this.drawalList[ordersIndex];
      this.$refs["editAccount"].show(this.form);
    },
    // 获取发明人 收款账户
    getDrawal() {
      this.$axios.get("api/withdrawal").then((res) => {
        if (res.data.code == 200) {
          this.drawalList = res.data.data;
          this.total = this.drawalList.length;
        } else {
          this.$alert(res.data.message, "提示", {
            confirmButtonText: "确定",
            center: true,
            type: "warning",
            callback: (action) => {},
          });
        }
      });
    },
    cancel() {
      this.$router.go(-1);
    },
  },
};
</script>

<style lang='less'>
.showMr {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  span {
    color: turquoise;
  }
  .deleteBut {
    span {
      color: #fff;
    }
  }
}
.bankcard {
  height: 100%;
  width: 100%;
  background: #fff;
  padding: 60px 30px 50px 30px;
  box-sizing: border-box;
  position: relative;
  ::-webkit-scrollbar {
    width: 5px;
    height: 1px;
  }
  ::-webkit-scrollbar-thumb {
    //滑块部分
    border-radius: 6px;
    // background-color: rgb(175, 74, 240);
  }
  ::-webkit-scrollbar-track {
    //轨道部分
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    background: #ededed;
    border-radius: 5px;
  }
  &-close {
    font-size: 25px;
    position: absolute;
    right: 30px;
    top: 30px;
    cursor: pointer;
  }
  h1 {
    font-size: 20px;
    font-weight: 700;
  }
  &-content {
    height: 85%;
    padding: 5px 20px;
    overflow-y: auto;
    .bank-title {
      color: #008b00;
      font-size: 16px;
      margin: 8px 0;
    }
    .no-bank {
      font-size: 16px;
      text-align: center;
      margin: 20px 0;
    }
    .box-card {
      margin: 5px 0;
      cursor: pointer;
      .bank-name {
        font-size: 16px;
        margin: 5px 0;
      }
      .bank-detail {
        font-size: 14px;
      }
    }
  }
  &-btns {
    margin-top: 40px;
    .el-button {
      margin-left: 0;
      // margin-right: 20px;
      padding: 8px 22px 8px 22px;
      font-size: 15px;
      border-radius: 5px;
    }

    .submit {
      background: #249dff;
      color: #fff;
      margin-right: 0;
    }
  }
}
</style>